<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 5.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"gz1234.gitee.io","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="什么是React? React 是一个用于构建用户界面的JavaScript库 核心专注于视图,目的实现组件化开发  组件化的概念我们可以很直观的将一个复杂的页面分割成若干个独立组件,每个组件包含自己的逻辑和样式 再将这些独立组件组合完成一个复杂的页面。 这样既减少了逻辑复杂度，又实现了代码的重用  可组合：一个组件可以和其他的组件一起使用或者可以直接嵌套在另一个组件内部 可重用：每个组件都是具有">
<meta property="og:type" content="article">
<meta property="og:title" content="react 基础">
<meta property="og:url" content="https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/index.html">
<meta property="og:site_name" content="郭泽">
<meta property="og:description" content="什么是React? React 是一个用于构建用户界面的JavaScript库 核心专注于视图,目的实现组件化开发  组件化的概念我们可以很直观的将一个复杂的页面分割成若干个独立组件,每个组件包含自己的逻辑和样式 再将这些独立组件组合完成一个复杂的页面。 这样既减少了逻辑复杂度，又实现了代码的重用  可组合：一个组件可以和其他的组件一起使用或者可以直接嵌套在另一个组件内部 可重用：每个组件都是具有">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/react15.png">
<meta property="og:image" content="https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/react16.3.png">
<meta property="og:image" content="https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/react.png">
<meta property="article:published_time" content="2020-10-21T02:07:09.000Z">
<meta property="article:modified_time" content="2023-03-17T09:07:12.071Z">
<meta property="article:author" content="郭泽">
<meta property="article:tag" content="react 基础">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/react15.png">


<link rel="canonical" href="https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/","path":"2020/10/21/react笔记/React基础篇/","title":"react 基础"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>react 基础 | 郭泽</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">郭泽</p>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFReact"><span class="nav-number">1.</span> <span class="nav-text">什么是React?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E5%8C%96%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="nav-number">2.</span> <span class="nav-text">组件化的概念</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%91%E9%80%9Areact%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83"><span class="nav-number">3.</span> <span class="nav-text">跑通react开发环境</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AE%80%E4%BB%8BJSX"><span class="nav-number">4.</span> <span class="nav-text">简介JSX</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#createElement"><span class="nav-number">5.</span> <span class="nav-text">createElement</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react%E5%85%83%E7%B4%A0-JSX%E5%85%83%E7%B4%A0"><span class="nav-number">6.</span> <span class="nav-text">react元素&#x2F;JSX元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%A8%A1%E6%8B%9Frender%E5%AE%9E%E7%8E%B0"><span class="nav-number">7.</span> <span class="nav-text">模拟render实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSX%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E7%94%A8%E6%B3%95"><span class="nav-number">8.</span> <span class="nav-text">JSX表达式的用法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSX%E5%B1%9E%E6%80%A7"><span class="nav-number">9.</span> <span class="nav-text">JSX属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E7%89%B9%E7%82%B9%E5%A3%B0%E6%98%8E%E6%96%B9%E5%BC%8F"><span class="nav-number">10.</span> <span class="nav-text">组件的特点声明方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%AE%9A%E4%B9%89%E6%96%B9%E5%BC%8F"><span class="nav-number">11.</span> <span class="nav-text">组件的两种定义方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E4%B8%AD%E5%B1%9E%E6%80%A7%E5%92%8C%E7%8A%B6%E6%80%81%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">12.</span> <span class="nav-text">组件中属性和状态的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#setState-%E4%BD%BF%E7%94%A8-18%E4%B9%8B%E5%89%8D"><span class="nav-number">13.</span> <span class="nav-text">setState 使用(18之前)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6"><span class="nav-number">14.</span> <span class="nav-text">绑定事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7%E6%A0%A1%E9%AA%8C-%E9%BB%98%E8%AE%A4%E5%B1%9E%E6%80%A7"><span class="nav-number">15.</span> <span class="nav-text">属性校验,默认属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%A4%8D%E5%90%88%E7%BB%84%E4%BB%B6"><span class="nav-number">16.</span> <span class="nav-text">复合组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%8D%E5%85%B7%E5%90%8D"><span class="nav-number">16.1.</span> <span class="nav-text">不具名</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%85%B7%E5%90%8D%EF%BC%88%E4%BC%A0%E4%B8%AA%E5%AF%B9%E8%B1%A1%E8%BF%9B%E5%8E%BB%EF%BC%89"><span class="nav-number">16.2.</span> <span class="nav-text">具名（传个对象进去）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E9%80%9A%E4%BF%A1"><span class="nav-number">16.3.</span> <span class="nav-text">父子组件的通信</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%90%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E9%80%9A%E4%BF%A1"><span class="nav-number">16.4.</span> <span class="nav-text">子父组件的通信</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E5%92%8C%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6"><span class="nav-number">17.</span> <span class="nav-text">受控组件和非受控组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E7%8E%B0%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A"><span class="nav-number">17.1.</span> <span class="nav-text">实现双向数据绑定</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6"><span class="nav-number">17.2.</span> <span class="nav-text">受控组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6"><span class="nav-number">17.3.</span> <span class="nav-text">非受控组件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="nav-number">18.</span> <span class="nav-text">生命周期</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#16-3-%E4%B9%8B%E5%89%8D%E7%9A%84"><span class="nav-number">18.1.</span> <span class="nav-text">16.3 之前的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#16-3-%E4%B9%8B%E5%90%8E%E7%9A%84"><span class="nav-number">18.2.</span> <span class="nav-text">16.3 之后的</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react-%E5%88%97%E8%A1%A8%E5%85%B7%E5%A4%87%E5%94%AF%E4%B8%80%E7%9A%84-key-%E5%80%BC"><span class="nav-number">19.</span> <span class="nav-text">react 列表具备唯一的 key 值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react-%E9%94%99%E8%AF%AF%E8%BE%B9%E7%95%8C"><span class="nav-number">20.</span> <span class="nav-text">react 错误边界</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react%E7%9A%84dangerouslySetInnerHTML%E4%BD%BF%E7%94%A8"><span class="nav-number">21.</span> <span class="nav-text">react的dangerouslySetInnerHTML使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ref-%E8%8E%B7%E5%8F%96dom"><span class="nav-number">22.</span> <span class="nav-text">ref 获取dom</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react-createContext"><span class="nav-number">23.</span> <span class="nav-text">react createContext</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react-JSX-%E4%BD%BF%E7%94%A8%E5%92%8C%E7%BB%84%E4%BB%B6"><span class="nav-number">24.</span> <span class="nav-text">react JSX 使用和组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#JSX%E8%AF%AD%E6%B3%95"><span class="nav-number">24.1.</span> <span class="nav-text">JSX语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F"><span class="nav-number">24.2.</span> <span class="nav-text">组件样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-number">24.3.</span> <span class="nav-text">事件处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSX%E4%B8%AD%E7%9A%84children"><span class="nav-number">24.4.</span> <span class="nav-text">JSX中的children</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react-dom-diff-fiber"><span class="nav-number">25.</span> <span class="nav-text">react dom diff fiber</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react-%E8%B5%84%E6%BA%90"><span class="nav-number">26.</span> <span class="nav-text">react 资源</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">郭泽</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">54</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">51</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="react 基础 | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          react 基础
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-21 10:07:09" itemprop="dateCreated datePublished" datetime="2020-10-21T10:07:09+08:00">2020-10-21</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-03-17 17:07:12" itemprop="dateModified" datetime="2023-03-17T17:07:12+08:00">2023-03-17</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/react/" itemprop="url" rel="index"><span itemprop="name">react</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="什么是React"><a href="#什么是React" class="headerlink" title="什么是React?"></a>什么是React?</h2><ul>
<li>React 是一个用于构建用户界面的JavaScript库</li>
<li>核心专注于视图,目的实现组件化开发</li>
</ul>
<h2 id="组件化的概念"><a href="#组件化的概念" class="headerlink" title="组件化的概念"></a>组件化的概念</h2><p>我们可以很直观的将一个复杂的页面分割成若干个独立组件,每个组件包含自己的逻辑和样式 再将这些独立组件组合完成一个复杂的页面。 这样既减少了逻辑复杂度，又实现了代码的重用</p>
<ul>
<li>可组合：一个组件可以和其他的组件一起使用或者可以直接嵌套在另一个组件内部</li>
<li>可重用：每个组件都是具有独立功能的，它可以被使用在多个场景中</li>
<li>可维护：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护</li>
</ul>
<p><em><a target="_blank" rel="noopener" href="https://pan.baidu.com/s/1hsivfN2">https://pan.baidu.com/s/1hsivfN2</a></em></p>
<h2 id="跑通react开发环境"><a href="#跑通react开发环境" class="headerlink" title="跑通react开发环境"></a>跑通react开发环境</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install create-react-app -g</span><br><span class="line">create-react-app &lt;project-name&gt;</span><br><span class="line">cd &lt;project-name&gt; &amp;&amp; npm start</span><br></pre></td></tr></table></figure>
<a id="more"></a>
<blockquote>
<p>默认会自动安装React,react由两部分组成,分别是:</p>
</blockquote>
<ul>
<li>react.js 是 React 的核心库</li>
<li>react-dom.js 是提供与DOM相关的功能,会在window下增加ReactDOM属性,内部比较重要的方法是render,将react元素或者react组件插入到页面中。</li>
</ul>
<h2 id="简介JSX"><a href="#简介JSX" class="headerlink" title="简介JSX"></a>简介JSX</h2><ul>
<li>是一种JS和HTML混合的语法,将组件的结构、数据甚至样式都聚合在一起定义组件,会编译成普通的Javascript。</li>
</ul>
<blockquote>
<p>需要注意的是JSX并不是html,在JSX中属性不能包含关键字，像class需要写成className,for需要写成htmlFor,并且属性名需要采用驼峰命名法！</p>
</blockquote>
<h2 id="createElement"><a href="#createElement" class="headerlink" title="createElement"></a>createElement</h2><p>JSX其实只是一种语法糖,最终会通过<a target="_blank" rel="noopener" href="https://babeljs.io/repl/">babel</a>转译成createElement语法,以下代码等价</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ReactDOM.render(&lt;div&gt;姜,&lt;span&gt;帅哥&lt;&#x2F;span&gt;&lt;&#x2F;div&gt;);</span><br><span class="line">ReactDOM.render(React.createElement(&quot;div&quot;,null,&quot;姜,&quot;,React.createElement(&quot;span&quot;,null,&quot;帅哥&quot;)));</span><br></pre></td></tr></table></figure>

<blockquote>
<p>我们一般使用React.createElement来创建一个虚拟dom元素。</p>
</blockquote>
<h2 id="react元素-JSX元素"><a href="#react元素-JSX元素" class="headerlink" title="react元素/JSX元素"></a>react元素/JSX元素</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ReactElement</span>(<span class="params">type,props</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.type = type;</span><br><span class="line">    <span class="built_in">this</span>.props = props;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> React = &#123;</span><br><span class="line">    <span class="function"><span class="title">createElement</span>(<span class="params">type,props=&#123;&#125;,...childrens</span>)</span>&#123;</span><br><span class="line">        childrens.length===<span class="number">1</span>?childrens = childrens[<span class="number">0</span>]:<span class="keyword">void</span> <span class="number">0</span></span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> ReactElement(type,&#123;...props,<span class="attr">children</span>:childrens&#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>ReactElement就是虚拟dom的概念，具有一个type属性代表当前的节点类型，还有节点的属性props</p>
</blockquote>
<h2 id="模拟render实现"><a href="#模拟render实现" class="headerlink" title="模拟render实现"></a>模拟render实现</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> render = <span class="function">(<span class="params">eleObj,container</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 先取出第一层 进行创建真实dom</span></span><br><span class="line">    <span class="keyword">let</span> &#123;type,props&#125; = eleObj;</span><br><span class="line">    <span class="keyword">let</span> elementNode = <span class="built_in">document</span>.createElement(type); <span class="comment">// 创建第一个元素</span></span><br><span class="line">    <span class="function"><span class="title">for</span>(<span class="params"><span class="keyword">let</span> attr <span class="keyword">in</span> props</span>)</span>&#123; <span class="comment">// 循环所有属性</span></span><br><span class="line">        <span class="function"><span class="title">if</span>(<span class="params">attr === <span class="string">&#x27;children&#x27;</span></span>)</span>&#123; <span class="comment">// 如果是children表示有嵌套关系</span></span><br><span class="line">            <span class="function"><span class="title">if</span>(<span class="params"><span class="keyword">typeof</span> props[attr] == <span class="string">&#x27;object&#x27;</span></span>)</span>&#123; <span class="comment">// 看是否是只有一个文本节点</span></span><br><span class="line">                props[attr].forEach(<span class="function"><span class="params">item</span>=&gt;</span>&#123; <span class="comment">// 多个的话循环判断 如果是对象再次调用render方法</span></span><br><span class="line">                    <span class="function"><span class="title">if</span>(<span class="params"><span class="keyword">typeof</span> item === <span class="string">&#x27;object&#x27;</span></span>)</span>&#123;</span><br><span class="line">                        render(item,elementNode)</span><br><span class="line">                    &#125;<span class="keyword">else</span>&#123; <span class="comment">//是文本节点 直接创建即可</span></span><br><span class="line">                        elementNode.appendChild(<span class="built_in">document</span>.createTextNode(item));</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123; <span class="comment">// 只有一个文本节点直接创建即可</span></span><br><span class="line">                elementNode.appendChild(<span class="built_in">document</span>.createTextNode(props[attr]));</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;<span class="keyword">else</span> <span class="function"><span class="title">if</span>(<span class="params">attr === <span class="string">&#x27;className&#x27;</span></span>)</span>&#123; <span class="comment">// 是不是class属性 class 属性特殊处理</span></span><br><span class="line">            elementNode.setAttribute(<span class="string">&#x27;class&#x27;</span>,props[attr]);</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            elementNode.setAttribute(attr,props[attr]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    container.appendChild(elementNode)</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="JSX表达式的用法"><a href="#JSX表达式的用法" class="headerlink" title="JSX表达式的用法"></a>JSX表达式的用法</h2><ul>
<li><ol>
<li>可以放JS的执行结果</li>
</ol>
</li>
<li><ol start="2">
<li>如果换行需要用()包裹jsx代码</li>
</ol>
</li>
<li><ol start="3">
<li>可以把JSX元素当作函数的返回值</li>
</ol>
</li>
<li><ol start="4">
<li>&lt;{来判断是表达式还是js</li>
</ol>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">&#x27;react-dom&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">toResult</span>(<span class="params">&#123;name,age&#125;</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span>今年&#123;name&#125;,&#123;age&#125;岁了!<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arrs =  [&#123;<span class="attr">name</span>:<span class="string">&#x27;zfpx&#x27;</span>,<span class="attr">age</span>:<span class="number">8</span>&#125;,,&#123;<span class="attr">name</span>:<span class="string">&#x27;姜文&#x27;</span>,<span class="attr">age</span>:<span class="number">28</span>&#125;];</span><br><span class="line">ReactDOM.render(&lt;div&gt;</span><br><span class="line">    &#123;arrs.map((<span class="function">(<span class="params">item,index</span>)=&gt;</span>(</span><br><span class="line">        <span class="keyword">typeof</span> item===<span class="string">&#x27;object&#x27;</span>?<span class="xml"><span class="tag">&lt;<span class="name">li</span> <span class="attr">key</span>=<span class="string">&#123;index&#125;</span>&gt;</span>&#123;toResult(item)&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span>:<span class="literal">null</span></span><br><span class="line">    )))&#125;</span><br><span class="line">&lt;/div&gt;,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;root&#x27;</span>));</span><br></pre></td></tr></table></figure>

<blockquote>
<p>null也是合法元素,循环时需要带key属性</p>
</blockquote>
<h2 id="JSX属性"><a href="#JSX属性" class="headerlink" title="JSX属性"></a>JSX属性</h2><ul>
<li>在JSX中分为普通属性和特殊属性，像class要写成className,for要写成htmlFor</li>
<li>style要采用对象的方式</li>
<li>dangerouslyInnerHTML插入html</li>
</ul>
<h2 id="组件的特点声明方式"><a href="#组件的特点声明方式" class="headerlink" title="组件的特点声明方式"></a>组件的特点声明方式</h2><p>react元素是是组件组成的基本单位</p>
<ul>
<li>首字母必须大写,目的是为了和JSX元素进行区分</li>
<li>组件定义后可以像JSX元素一样进行使用</li>
<li>每个组件必须返回唯一的顶级JSX元素</li>
<li>可以通过render方法将组件渲染成真实DOM</li>
</ul>
<h2 id="组件的两种定义方式"><a href="#组件的两种定义方式" class="headerlink" title="组件的两种定义方式"></a>组件的两种定义方式</h2><p>react怎么区分是组件还是jsx元素？组件名需要开头大写，react组件当作jsx来进行使用</p>
<ul>
<li>第一种方式是函数声明</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Build</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;props.name&#125; &#123;props.age&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">&#125;</span><br><span class="line">render(&lt;div&gt;</span><br><span class="line">    &lt;Build name=&#123;school1.name&#125; age=&#123;school1.age&#125;/&gt;</span><br><span class="line">    &lt;Build &#123;...school2&#125; /&gt;</span><br><span class="line">&lt;/div&gt;,<span class="built_in">window</span>.root);</span><br></pre></td></tr></table></figure>

<ul>
<li>第二种方式是类声明</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Build</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> &#123;name,age&#125; = <span class="built_in">this</span>.props;</span><br><span class="line">        <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;name&#125; &#123;age&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>类声明有状态，this，和声明周期</p>
</blockquote>
<h2 id="组件中属性和状态的区别"><a href="#组件中属性和状态的区别" class="headerlink" title="组件中属性和状态的区别"></a>组件中属性和状态的区别</h2><ul>
<li>组件的数据来源有两个地方<ul>
<li>props 外界传递过来的(默认属性，属性校验)</li>
<li>state 状态是自己的,改变状态唯一的方式就是setState</li>
</ul>
</li>
</ul>
<blockquote>
<p>属性和状态的变化都会影响视图更新</p>
</blockquote>
<h2 id="setState-使用-18之前"><a href="#setState-使用-18之前" class="headerlink" title="setState 使用(18之前)"></a>setState 使用(18之前)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">setState(partialState, callback)</span><br><span class="line"><span class="number">1.</span> partialState : object|<span class="function"><span class="keyword">function</span></span></span><br><span class="line"><span class="function">⽤于产⽣与当前<span class="title">state</span>合并的⼦集。</span></span><br><span class="line"><span class="function">2. <span class="title">callback</span> : <span class="function"><span class="keyword">function</span></span></span></span><br><span class="line"><span class="function"><span class="function"><span class="title">state</span>更新之后被调⽤。</span></span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">SetStatePage</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">props</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">super</span>(props);</span><br><span class="line">        <span class="built_in">this</span>.state = &#123;</span><br><span class="line">            counter: <span class="number">0</span></span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    changeValue = <span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.setState(&#123;</span><br><span class="line">            counter: <span class="built_in">this</span>.state.counter + v</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;counter&quot;</span>, <span class="built_in">this</span>.state.counter);</span><br><span class="line">    &#125;;</span><br><span class="line">    setCounter = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.changeValue(<span class="number">1</span>);</span><br><span class="line">        <span class="built_in">this</span>.changeValue(<span class="number">2</span>);</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&quot;counter&quot;</span>, <span class="built_in">this</span>.state.counter);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;</span><br><span class="line">            counter</span><br><span class="line">        &#125; = <span class="built_in">this</span>.state;</span><br><span class="line">        <span class="keyword">return</span> (&lt;div&gt;</span><br><span class="line">                &lt;h3&gt;SetStatePage&lt;/h3&gt;</span><br><span class="line">                &lt;button onClick=&#123;<span class="built_in">this</span>.setCounter&#125;&gt;&#123;counter&#125;&lt;/button&gt;</span><br><span class="line">              &lt;/div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><p>setState只有在react自己的上下文⽣命周期函数中是异步的合并的(函数不会合并)，在原⽣事件和setTimeout中都是同步<br>的，这⾥的异步其实是批量更新。<br>要获取到最新状态值有以下⽅式</p>
<ul>
<li><p>在回调中获取状态值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">changeValue = <span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">this</span>.setState(</span><br><span class="line">  &#123;</span><br><span class="line">  counter: <span class="built_in">this</span>.state.counter + v</span><br><span class="line">  &#125;,</span><br><span class="line">  () =&gt; &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;counter&quot;</span>, <span class="built_in">this</span>.state.counter);</span><br><span class="line">  &#125;</span><br><span class="line">  );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>使⽤定时器：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line"><span class="built_in">this</span>.setCounter();</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>原⽣事件中修改状态</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="built_in">document</span>.body.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="built_in">this</span>.changeValue, <span class="literal">false</span>)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>传入对象 setState 的更新会被合并 执行最后一次</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">changeValue = <span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">this</span>.setState(&#123;</span><br><span class="line">  counter: <span class="built_in">this</span>.state.counter + v</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line">setCounter = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">this</span>.changeValue(<span class="number">1</span>);</span><br><span class="line">  <span class="built_in">this</span>.changeValue(<span class="number">2</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>传入函数实现链式更新state</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">changeValue = <span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line"><span class="built_in">this</span>.setState(<span class="function">(<span class="params">state,props</span>) =&gt;</span> (&#123; <span class="attr">counter</span>: state.counter + v &#125;));</span><br><span class="line">&#125;;</span><br><span class="line">setCounter = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">this</span>.changeValue(<span class="number">1</span>);</span><br><span class="line">  <span class="built_in">this</span>.changeValue(<span class="number">2</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="绑定事件"><a href="#绑定事件" class="headerlink" title="绑定事件"></a>绑定事件</h2><ul>
<li>给元素绑定事件，事件绑定方式<br><code>react 的事件对象是经过封装 后的 遵循为w3c</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Clock</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">super</span>();</span><br><span class="line">        <span class="built_in">this</span>.state = &#123;<span class="attr">date</span>:<span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleString()&#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// this.destroy = this.destroy.bind(this)</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span>&#123; <span class="comment">//组件渲染完成，当渲染后会自动触发此函数</span></span><br><span class="line">        <span class="built_in">this</span>.timer = <span class="built_in">setInterval</span>(<span class="function">()=&gt;</span>&#123; <span class="comment">// 箭头函数 否则this 指向的是window</span></span><br><span class="line">            <span class="built_in">this</span>.setState(&#123;<span class="attr">date</span>:<span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleString()&#125;)</span><br><span class="line">        &#125;,<span class="number">1000</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">componentWillUnmount</span>(<span class="params"></span>)</span>&#123; <span class="comment">//组件将要卸载，当组件移除时会调用</span></span><br><span class="line">        <span class="built_in">clearInterval</span>(<span class="built_in">this</span>.timer); <span class="comment">//一般在这个方法中 清除定时器和绑定的事件</span></span><br><span class="line">    &#125;</span><br><span class="line">    destroy=<span class="function">(<span class="params">p1,p2,p3,event</span>)=&gt;</span>&#123; <span class="comment">//es7 箭头函数</span></span><br><span class="line">     <span class="comment">//   e =&gt; 事件对象 event 其实是 React 封装的。可以看 _proto_.constructor 是 SyntheticEvent</span></span><br><span class="line">        <span class="comment">// 删除某个组件</span></span><br><span class="line">        ReactDOM.unmountComponentAtNode(<span class="built_in">window</span>.root);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// destroy()&#123; //es7 箭头函数</span></span><br><span class="line">    <span class="comment">//     // 删除某个组件</span></span><br><span class="line">    <span class="comment">//     ReactDOM.unmountComponentAtNode(window.root);</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="comment">// 给react元素绑定事件默认this是undefined,bind方式 在就是箭头函数</span></span><br><span class="line">        <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">onClick</span>=<span class="string">&#123;this.destroy(1,2,3)&#125;</span>&gt;</span>&#123;this.state.date&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 执行顺序 constructor -&gt; render -&gt; componentDidMount -&gt; setState-&gt; render - onClick-&gt; unmountComponentAtNode -&gt; componentWillUnmount -&gt; clearInterval</span></span><br><span class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">Clock</span>/&gt;</span></span>,<span class="built_in">window</span>.root);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>给jsx元素绑定事件要注意事件中的this指向，事件名采用 on+”开头大写事件名”的方式<br>bind 事件对象默认传入在最后  ——–  回掉需要显示传入 event 在最后 event 是 React 封装的, event.nativeEvent 是原始的</p>
</blockquote>
<h2 id="属性校验-默认属性"><a href="#属性校验-默认属性" class="headerlink" title="属性校验,默认属性"></a>属性校验,默认属性</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">&#x27;react-dom&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">&#x27;prop-types&#x27;</span>; <span class="comment">//引入属性校验的模块</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">School</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123; <span class="comment">// 类上的属性就叫静态属性</span></span><br><span class="line">    <span class="keyword">static</span> propTypes = &#123; <span class="comment">// 校验属性的类型和是否必填</span></span><br><span class="line">        age:PropTypes.number.isRequired, <span class="comment">// 支持的类型可以参考prop-types的readme文件</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">static</span> defaultProps = &#123; <span class="comment">// 先默认调用defaultProps</span></span><br><span class="line">        name:<span class="string">&#x27;珠峰&#x27;</span>,</span><br><span class="line">        age:<span class="number">1</span></span><br><span class="line">    &#125;; <span class="comment">// 默认属性</span></span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params">props</span>)</span>&#123; <span class="comment">//如果想在构造函数中拿到属性需要通过参数的方式</span></span><br><span class="line">         <span class="comment">//不能在组件中更改属性 不能修改属性*</span></span><br><span class="line">        <span class="built_in">super</span>();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;this.props.name&#125; &#123;this.props.age&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>propTypes和defaultProps名字不能更改，这是react规定好的名称</p>
</blockquote>
<h2 id="复合组件"><a href="#复合组件" class="headerlink" title="复合组件"></a>复合组件</h2><p>复合组件就是将多个组件进行组合，结构非常复杂时可以把组件分离开</p>
<h3 id="不具名"><a href="#不具名" class="headerlink" title="不具名"></a>不具名</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> TopBar <span class="keyword">from</span> <span class="string">&quot;../components/TopBar&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> BottomBar <span class="keyword">from</span> <span class="string">&quot;../components/BottomBar&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Layout</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; title = <span class="string">&quot;商城&quot;</span> &#125; = <span class="built_in">this</span>.props;</span><br><span class="line">    <span class="built_in">document</span>.title = title;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; children, showTopBar, showBottomBar &#125; = <span class="built_in">this</span>.props;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;children&quot;</span>, children);</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &#123;showTopBar &amp;&amp; <span class="xml"><span class="tag">&lt;<span class="name">TopBar</span> /&gt;</span></span>&#125;</span><br><span class="line">        &#123;children.content&#125;</span><br><span class="line">        &#123;children.txt&#125;</span><br><span class="line">        &lt;button onClick=&#123;children.btnClick&#125;&gt;button&lt;/button&gt;</span><br><span class="line">        &#123;showBottomBar &amp;&amp; <span class="xml"><span class="tag">&lt;<span class="name">BottomBar</span> /&gt;</span></span>&#125;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> Layout <span class="keyword">from</span> <span class="string">&quot;./Layout&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">UserPage</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;Layout showTopBar=&#123;<span class="literal">true</span>&#125; showBottomBar=&#123;<span class="literal">true</span>&#125; title=<span class="string">&quot;⽤用户中⼼心&quot;</span>&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">          &lt;h3&gt;UserPage&lt;/h3&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/Layout&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="具名（传个对象进去）"><a href="#具名（传个对象进去）" class="headerlink" title="具名（传个对象进去）"></a>具名（传个对象进去）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> Layout <span class="keyword">from</span> <span class="string">&quot;./Layout&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">HomePage</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;Layout showTopBar=&#123;<span class="literal">false</span>&#125; showBottomBar=&#123;<span class="literal">true</span>&#125; title=<span class="string">&quot;商城⾸首⻚页&quot;</span>&gt;</span><br><span class="line">        &#123;&#123;</span><br><span class="line">          content: (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">              &lt;h3&gt;HomePage&lt;/h3&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          ),</span><br><span class="line">          txt: <span class="string">&quot;这是个⽂文本&quot;</span>,</span><br><span class="line">          btnClick: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&quot;btnClick&quot;</span>);</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;&#125;</span><br><span class="line">      &lt;/Layout&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="父子组件的通信"><a href="#父子组件的通信" class="headerlink" title="父子组件的通信"></a>父子组件的通信</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Panel</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> &#123;header,body&#125; = <span class="built_in">this</span>.props;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div className=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">                &lt;div className=<span class="string">&quot;panel-default panel&quot;</span>&gt;</span><br><span class="line">                    &lt;Header head=&#123;header&#125;&gt;&lt;/Header&gt;</span><br><span class="line">                    &lt;Body b=&#123;body&#125;/&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        )</span><br><span class="line">    &#125;</span><br><span class="line">&#125; <span class="comment">// react种需要将属性一层层向下传递 单向数据流</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Body</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span> (<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;panel-body&quot;</span>&gt;</span>&#123;this.props.b&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>)&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Header</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span> (<span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;panel-heading&quot;</span>&gt;</span>&#123;this.props.head&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>)&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> data = &#123;<span class="attr">header</span>:<span class="string">&#x27;我非常帅&#x27;</span>,<span class="attr">body</span>:<span class="string">&#x27;长的帅&#x27;</span>&#125;;</span><br><span class="line">ReactDOM.render(<span class="xml"><span class="tag">&lt;<span class="name">Panel</span> &#123;<span class="attr">...data</span>&#125;/&gt;</span></span>,<span class="built_in">window</span>.root);</span><br></pre></td></tr></table></figure>

<h3 id="子父组件的通信"><a href="#子父组件的通信" class="headerlink" title="子父组件的通信"></a>子父组件的通信</h3><p>通过父亲传递给儿子一个函数，儿子调用父亲的函数将值传递给父亲,父亲更新值，刷新视图</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Panel</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">super</span>();</span><br><span class="line">        <span class="built_in">this</span>.state = &#123;<span class="attr">color</span>:<span class="string">&#x27;primary&#x27;</span>&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    changeColor=<span class="function">(<span class="params">color</span>)=&gt;</span>&#123; <span class="comment">//到时候儿子传递一个颜色</span></span><br><span class="line">        <span class="built_in">this</span>.setState(&#123;color&#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div className=<span class="string">&quot;container&quot;</span>&gt;</span><br><span class="line">                &lt;div className=&#123;<span class="string">&quot;panel-&quot;</span>+<span class="built_in">this</span>.state.color+<span class="string">&quot; panel&quot;</span>&#125;&gt;</span><br><span class="line">                    &lt;Header head=&#123;<span class="built_in">this</span>.props.header&#125;</span><br><span class="line">                            change=&#123;<span class="built_in">this</span>.changeColor&#125;</span><br><span class="line">                    &gt;&lt;/Header&gt;</span><br><span class="line">                &lt;/div&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        )</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Header</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    handleClick = <span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.props.change(<span class="string">&#x27;danger&#x27;</span>); <span class="comment">//调用父亲的方法</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;<span class="keyword">return</span> (</span><br><span class="line">        &lt;div className=<span class="string">&quot;panel-heading&quot;</span>&gt;</span><br><span class="line">        &#123;<span class="built_in">this</span>.props.head&#125; &lt;button className=<span class="string">&quot;btn btn-danger&quot;</span> onClick=&#123;<span class="built_in">this</span>.handleClick&#125;&gt;改颜色&lt;/button&gt;</span><br><span class="line">        &lt;/div&gt;)&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="受控组件和非受控组件"><a href="#受控组件和非受控组件" class="headerlink" title="受控组件和非受控组件"></a>受控组件和非受控组件</h2><ul>
<li>受状态控制的组件，必须要有onChange方法，否则不能使用</li>
<li>受控组件可以赋予默认值（官方推荐使用 受控组件）</li>
</ul>
<h3 id="实现双向数据绑定"><a href="#实现双向数据绑定" class="headerlink" title="实现双向数据绑定"></a>实现双向数据绑定</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Input</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">super</span>();</span><br><span class="line">        <span class="built_in">this</span>.state = &#123;<span class="attr">val</span>:<span class="string">&#x27;100&#x27;</span>&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    handleChange = <span class="function">(<span class="params">e</span>) =&gt;</span>&#123; <span class="comment">//e是事件源</span></span><br><span class="line">        <span class="keyword">let</span> val = e.target.value;</span><br><span class="line">        <span class="built_in">this</span>.setState(&#123;val&#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> (&lt;div&gt;</span><br><span class="line">            &lt;input type=<span class="string">&quot;text&quot;</span> value=&#123;<span class="built_in">this</span>.state.val&#125; onChange=&#123;<span class="built_in">this</span>.handleChange&#125;/&gt;</span><br><span class="line">            &#123;<span class="built_in">this</span>.state.val&#125;</span><br><span class="line">        &lt;/div&gt;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="受控组件"><a href="#受控组件" class="headerlink" title="受控组件"></a>受控组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Sum</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">super</span>();</span><br><span class="line">        <span class="built_in">this</span>.state = &#123;<span class="attr">a</span>:<span class="number">1</span>,<span class="attr">b</span>:<span class="number">1</span>&#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// key表示的就是当前状态改的是哪一个</span></span><br><span class="line">    <span class="comment">// e表示的是事件源</span></span><br><span class="line">    <span class="function"><span class="title">handleChange</span>(<span class="params">key,e</span>)</span>&#123; <span class="comment">//处理多个输入框的值映射到状态的方法</span></span><br><span class="line">        <span class="built_in">this</span>.setState(&#123;</span><br><span class="line">            [key]:<span class="built_in">parseInt</span>(e.target.value) || <span class="number">0</span></span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;input type=<span class="string">&quot;number&quot;</span> value=&#123;<span class="built_in">this</span>.state.a&#125; onChange=&#123;<span class="function"><span class="params">e</span>=&gt;</span>&#123;<span class="built_in">this</span>.handleChange(<span class="string">&#x27;a&#x27;</span>,e)&#125;&#125;/&gt;</span><br><span class="line">                &lt;input type=<span class="string">&quot;number&quot;</span> value=&#123;<span class="built_in">this</span>.state.b&#125; onChange=&#123;<span class="function"><span class="params">e</span>=&gt;</span>&#123;<span class="built_in">this</span>.handleChange(<span class="string">&#x27;b&#x27;</span>,e)&#125;&#125;/&gt;</span><br><span class="line">                &#123;<span class="built_in">this</span>.state.a+<span class="built_in">this</span>.state.b&#125;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        )</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="非受控组件"><a href="#非受控组件" class="headerlink" title="非受控组件"></a>非受控组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Sum</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">super</span>();</span><br><span class="line">        <span class="built_in">this</span>.state =  &#123;<span class="attr">result</span>:<span class="string">&#x27;&#x27;</span>&#125;;</span><br><span class="line">        <span class="built_in">this</span>.inputRef = React.createRef();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//通过ref设置的属性 可以通过this.refs获取到对应的dom元素</span></span><br><span class="line">    <span class="comment">// 推荐使用 React.createRef()  获取到对应的dom元素</span></span><br><span class="line">    handleChange = <span class="function">() =&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">let</span> result = <span class="built_in">this</span>.refs.a.value + <span class="built_in">this</span>.b.value + <span class="built_in">this</span>.inputRef.current.value;</span><br><span class="line">        <span class="built_in">this</span>.setState(&#123;result&#125;);</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;div onChange=&#123;<span class="built_in">this</span>.handleChange&#125;&gt;</span><br><span class="line">                &lt;input type=<span class="string">&quot;number&quot;</span> ref=<span class="string">&quot;a&quot;</span>/&gt;</span><br><span class="line">                &lt;input type=<span class="string">&quot;number1&quot;</span> ref=&#123;<span class="built_in">this</span>.inputRef&#125;/&gt;</span><br><span class="line">                &#123;<span class="comment">/*x代表的真实的dom,把元素挂载在了当前实例上*/</span>&#125;</span><br><span class="line">                &lt;input type=<span class="string">&quot;number&quot;</span> ref=&#123;<span class="function">(<span class="params">x</span>)=&gt;</span>&#123;</span><br><span class="line">                    <span class="built_in">this</span>.b = x;</span><br><span class="line">                &#125;&#125;/&gt;</span><br><span class="line">                &#123;<span class="built_in">this</span>.state.result&#125;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        )</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Counter</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123; <span class="comment">// 他会比较两个状态相等就不会刷新视图 PureComponent是浅比较</span></span><br><span class="line">  <span class="keyword">static</span> defaultProps = &#123;</span><br><span class="line">    name:<span class="string">&#x27;珠峰培训&#x27;</span></span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="keyword">static</span> propTypes = &#123;</span><br><span class="line">    name: <span class="built_in">String</span>,</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">props</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>();</span><br><span class="line">    <span class="built_in">this</span>.state = &#123;<span class="attr">number</span>:<span class="number">0</span>&#125;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;1.constructor构造函数&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentWillMount</span>(<span class="params"></span>)</span>&#123; <span class="comment">// 取本地的数据 同步的方式：采用渲染之前获取数据，只渲染一次</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;2.组件将要加载 componentWillMount&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;4.组件挂载完成 componentDidMount&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  handleClick=<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.setState(&#123;<span class="attr">number</span>:<span class="built_in">this</span>.state.number+<span class="number">1</span>&#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="comment">// react可以shouldComponentUpdate方法中优化 PureComponent 可以帮我们做这件事</span></span><br><span class="line">  <span class="function"><span class="title">shouldComponentUpdate</span>(<span class="params">nextProps,nextState</span>)</span>&#123; <span class="comment">// 代表的是下一次的属性 和 下一次的状态</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;5.组件是否更新 shouldComponentUpdate&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> nextState.number%<span class="number">2</span>;</span><br><span class="line">    <span class="comment">// return nextState.number!==this.state.number; //如果此函数种返回了false 就不会调用render方法了</span></span><br><span class="line">  &#125; <span class="comment">//不要随便用setState 可能会死循环</span></span><br><span class="line">  <span class="function"><span class="title">componentWillUpdate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;6.组件将要更新 componentWillUpdate&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentDidUpdate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;7.组件完成更新 componentDidUpdate&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;3.render&#x27;</span>);</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;p&gt;&#123;<span class="built_in">this</span>.state.number&#125;&lt;/p&gt;</span><br><span class="line">        &#123;<span class="built_in">this</span>.state.number&gt;<span class="number">3</span>?<span class="literal">null</span>:<span class="xml"><span class="tag">&lt;<span class="name">ChildCounter</span> <span class="attr">n</span>=<span class="string">&#123;this.state.number&#125;/</span>&gt;</span></span>&#125;</span><br><span class="line">        &lt;button onClick=&#123;<span class="built_in">this</span>.handleClick&#125;&gt;+&lt;/button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">ChildCounter</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">componentWillUnmount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;组件将要卸载componentWillUnmount&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentWillMount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;child componentWillMount&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;child-render&#x27;</span>)</span><br><span class="line">    <span class="keyword">return</span> (&lt;div&gt;</span><br><span class="line">      &#123;<span class="built_in">this</span>.props.n&#125;</span><br><span class="line">    &lt;/div&gt;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;child componentDidMount&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentWillReceiveProps</span>(<span class="params">newProps</span>)</span>&#123; <span class="comment">// 第一次不会执行，之后属性更新时才会执行</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;child componentWillReceiveProps&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">shouldComponentUpdate</span>(<span class="params">nextProps,nextState</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> nextProps.n%<span class="number">3</span>; <span class="comment">//子组件判断接收的属性 是否满足更新条件 为true则更新</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// defaultProps</span></span><br><span class="line"><span class="comment">// constructor</span></span><br><span class="line"><span class="comment">// componentWillMount</span></span><br><span class="line"><span class="comment">// render</span></span><br><span class="line"><span class="comment">// componentDidMount</span></span><br><span class="line"><span class="comment">// 状态更新会触发的</span></span><br><span class="line"><span class="comment">// shouldComponentUpdate nextProps,nextState=&gt;boolean</span></span><br><span class="line"><span class="comment">// componentWillUpdate</span></span><br><span class="line"><span class="comment">// componentDidUpdate</span></span><br><span class="line"><span class="comment">// 属性更新</span></span><br><span class="line"><span class="comment">// componentWillReceiveProps newProps</span></span><br><span class="line"><span class="comment">// 卸载</span></span><br><span class="line"><span class="comment">// componentWillUnmount</span></span><br></pre></td></tr></table></figure>

<h3 id="16-3-之前的"><a href="#16-3-之前的" class="headerlink" title="16.3 之前的"></a>16.3 之前的</h3><p><img src="/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/react15.png" alt="lifeCycle"></p>
<h3 id="16-3-之后的"><a href="#16-3-之后的" class="headerlink" title="16.3 之后的"></a>16.3 之后的</h3><p><img src="/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/react16.3.png" alt="lifeCycle"></p>
<p><img src="/2020/10/21/react%E7%AC%94%E8%AE%B0/React%E5%9F%BA%E7%A1%80%E7%AF%87/react.png" alt="react生命周期"></p>
<p>V17可能会废弃的三个⽣生命周期函数⽤用getDerivedStateFromProps替代，⽬目前使⽤用的话加上UNSAFE_：</p>
<ul>
<li><p>componentWillMount</p>
</li>
<li><p>componentWillReceiveProps</p>
</li>
<li><p>componentWillUpdate<br>引⼊入两个新的⽣生命周期函数：</p>
</li>
<li><p>static getDerivedStateFromProps<br>  getDerivedStateFromProps 会在调⽤用 render ⽅方法之前调⽤用，并且在初始挂载及后续更更新时都会被<br>  调⽤用。它应返回⼀一个对象来更更新 state，如果返回 null 则不不更更新任何内容。<br>  请注意，不不管原因是什什么，都会在 每次 渲染前触发此⽅方法。这与UNSAFE_componentWillReceiveProps 形成对⽐比，后者仅在⽗父组件重新渲染时触发，而不不是在内部调⽤用  setState 时。</p>
</li>
<li><p>getSnapshotBeforeUpdate<br>  getSnapshotBeforeUpdate(prevProps, prevState)<br>  在render之后，在componentDidUpdate之前<br>  getSnapshotBeforeUpdate() 在最近⼀一次渲染输出（提交到 DOM 节点）之前调⽤用。它使得组件能<br>在发⽣生更更改之前从 DOM 中捕获⼀一些信息（例例如，滚动位置）。此⽣生命周期的任何返回值将作为参数传<br>递给  componentDidUpdate(prevProps, prevState, snapshot)</p>
</li>
</ul>
<p>如果不不想⼿手动给将要废弃的⽣生命周期添加  UNSAFE_ 前缀，可以⽤用下⾯面的命令。</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx react-codemod <span class="built_in">rename</span>-unsafe-lifecycles &lt;<span class="built_in">path</span>&gt;</span><br></pre></td></tr></table></figure>

<h2 id="react-列表具备唯一的-key-值"><a href="#react-列表具备唯一的-key-值" class="headerlink" title="react 列表具备唯一的 key 值"></a>react 列表具备唯一的 key 值</h2><ul>
<li>不建议（禁止）使用index 做key 值</li>
<li>尽量使用数据id</li>
<li>使用动态生成的静态ID nanoid</li>
<li><code>key 值不会当属性被传递  防止开发者在逻辑中对key操作</code></li>
</ul>
<h2 id="react-错误边界"><a href="#react-错误边界" class="headerlink" title="react 错误边界"></a>react 错误边界</h2><p>防止某个组件的UI渲染出错导致整个应用崩溃<br>子组件发生js的错误  有备用的UI组件<br>错误边界 <code>只能用 class 组件来写</code><br>错误捕获时机： 渲染时  生命周期 组件树的构造函数错误时触发<br><a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/error-boundaries.html">错误边界</a></p>
<h2 id="react的dangerouslySetInnerHTML使用"><a href="#react的dangerouslySetInnerHTML使用" class="headerlink" title="react的dangerouslySetInnerHTML使用"></a>react的dangerouslySetInnerHTML使用</h2><p>在Vue中有个v-html属性可以处理这个问题，而在React中，就需要用到dangerouslySetInnerHTML属性，它会将字符串中的html标签正常发挥作用。（当然你如果用js的innerHTML）<br>dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML的替换方案。<br>dangerouslySetInnerHTML 是react的一个属性，可以直接使用<br><code>有两个&quot;&#123;&#123;&#125;&#125;&quot;，第一个表示jsx语法，第二个表示一个键值对</code><br>dangerouslySetInnerHTML可以插入Dom，也可以插入字符串</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;./css/01-index.css&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">app</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">  state = &#123;</span><br><span class="line">      myhtml:<span class="string">`&lt;div class=&quot;bili-bangumi-card&quot;&gt;更新至第11话&lt;/div&gt;`</span></span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">                &lt;div dangerouslySetInnerHTML=&#123;&#123;</span><br><span class="line">                    __html: <span class="built_in">this</span>.state.myhtml</span><br><span class="line">                &#125;&#125;&gt;&lt;/div&gt;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="ref-获取dom"><a href="#ref-获取dom" class="headerlink" title="ref 获取dom"></a>ref 获取dom</h2><p>可以通过 createRef() useRef()  或者 ref 回调函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> App = (props)&#123;</span><br><span class="line">  <span class="keyword">let</span> inputRef;</span><br><span class="line">  <span class="keyword">let</span> clickFn = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(inputRef);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">    &lt;input type=<span class="string">&quot;text&quot;</span> ref = &#123; <span class="function">(<span class="params">dom</span>) =&gt;</span>&#123;</span><br><span class="line">      inputRef = dom</span><br><span class="line">     &#125;&#125;/&gt;</span><br><span class="line">     &lt;button onClick = &#123;clickFn&#125;&gt;</span><br><span class="line">     add</span><br><span class="line">     &lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="react-createContext"><a href="#react-createContext" class="headerlink" title="react createContext"></a>react createContext</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">const</span> MyContext = React.createContext()</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;MyContext.Provider</span><br><span class="line"> value=&#123;&#123;</span><br><span class="line">    name:<span class="string">&quot;kerwin&quot;</span>,</span><br><span class="line">    age:<span class="number">100</span>,</span><br><span class="line">    content:<span class="built_in">this</span>.state.content,</span><br><span class="line">   show:<span class="built_in">this</span>.show.bind(<span class="built_in">this</span>),</span><br><span class="line">   hide:<span class="built_in">this</span>.hide.bind(<span class="built_in">this</span>)</span><br><span class="line">  &#125;&#125;</span><br><span class="line">&lt;Test/&gt;</span><br><span class="line">&lt;/MyContext.Provider&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//  函数组件 使用MyContext.Consumer（消费者）</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Test</span>  </span>&#123;</span><br><span class="line">  <span class="comment">/* consumer -&gt; 使用provider -&gt; value </span></span><br><span class="line"><span class="comment">  订阅context 内部的变化</span></span><br><span class="line"><span class="comment">  consumer 使用函数作为子组件</span></span><br><span class="line"><span class="comment">  context 就近原则接受provider 的value</span></span><br><span class="line"><span class="comment">  provider 没有设置value 使用默认值</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;MyContext.Consumer&gt;</span><br><span class="line">         &#123;</span><br><span class="line">           context =&gt; &#123;</span><br><span class="line">             <span class="built_in">this</span>.myshow = context.show; <span class="comment">//可以在当前组件任意函数触发</span></span><br><span class="line">            <span class="built_in">this</span>.myhide = context.hide;<span class="comment">//可以在当前组件任意函数触发 </span></span><br><span class="line">            <span class="keyword">return</span> (</span><br><span class="line">             &lt;div&gt;</span><br><span class="line">              &#123;context.name&#125;-&#123;context.age&#125;-&#123;context.content&#125;</span><br><span class="line">             &lt;/div&gt;</span><br><span class="line">           )</span><br><span class="line">          &#125;</span><br><span class="line">         &#125;</span><br><span class="line">      &lt;/MyContext.Consumer&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 类组件 使用</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyClass</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> contextType = MyContext; <span class="comment">// 指定静态属性</span></span><br><span class="line">  <span class="function"><span class="title">componentDidUpdate</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="built_in">this</span>.context;</span><br><span class="line">    <span class="comment">/* ... */</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="built_in">this</span>.context;</span><br><span class="line">    <span class="comment">/* 基于这个值进行渲染工作 */</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyClass</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="built_in">this</span>.context;</span><br><span class="line">    <span class="comment">/* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentDidUpdate</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="built_in">this</span>.context;</span><br><span class="line">    <span class="comment">/* ... */</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentWillUnmount</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="built_in">this</span>.context;</span><br><span class="line">    <span class="comment">/* ... */</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> value = <span class="built_in">this</span>.context;</span><br><span class="line">    <span class="comment">/* 基于 MyContext 组件的值进行渲染 */</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">MyClass.contextType = MyContext;</span><br></pre></td></tr></table></figure>

<h2 id="react-JSX-使用和组件"><a href="#react-JSX-使用和组件" class="headerlink" title="react JSX 使用和组件"></a>react JSX 使用和组件</h2><h3 id="JSX语法"><a href="#JSX语法" class="headerlink" title="JSX语法"></a>JSX语法</h3><p>JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。<br>在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码<br>更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。<br><a target="_blank" rel="noopener" href="https://reactjs.org/docs/hello-world.html">https://reactjs.org/docs/hello-world.html</a><br> JavaScript 对象来表现一个 DOM 元素的结构</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">&#x27;app&#x27;</span> id=<span class="string">&#x27;appRoot&#x27;</span>&gt;</span><br><span class="line"> &lt;h1 <span class="class"><span class="keyword">class</span></span>=<span class="string">&#x27;title&#x27;</span>&gt;欢迎进入React的世界&lt;/h1&gt;</span><br><span class="line"> &lt;p&gt;</span><br><span class="line"> React.js 是一个帮助你构建页面 UI 的库</span><br><span class="line"> &lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"><span class="comment">// js 对象描述DOM</span></span><br><span class="line">&#123;</span><br><span class="line"> tag: <span class="string">&#x27;div&#x27;</span>,</span><br><span class="line"> attrs: &#123; <span class="attr">className</span>: <span class="string">&#x27;app&#x27;</span>, <span class="attr">id</span>: <span class="string">&#x27;appRoot&#x27;</span>&#125;,</span><br><span class="line"> children: [</span><br><span class="line"> &#123;</span><br><span class="line">   tag: <span class="string">&#x27;h1&#x27;</span>,</span><br><span class="line">   attrs: &#123; <span class="attr">className</span>: <span class="string">&#x27;title&#x27;</span> &#125;,</span><br><span class="line">   children: [<span class="string">&#x27;欢迎进入React的世界&#x27;</span>]</span><br><span class="line"> &#125;,</span><br><span class="line"> &#123;</span><br><span class="line">   tag: <span class="string">&#x27;p&#x27;</span>,</span><br><span class="line">   attrs: <span class="literal">null</span>,</span><br><span class="line">   children: [<span class="string">&#x27;React.js 是一个构建页面 UI 的库&#x27;</span>]</span><br><span class="line"> &#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">React.createElement(</span><br><span class="line">     <span class="string">&quot;p&quot;</span>,</span><br><span class="line">     <span class="literal">null</span>,</span><br><span class="line">     <span class="string">&quot;React.js 是一个构建页面 UI 的库&quot;</span></span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、<br>还有子元素等, 语法为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">React.createElement(</span><br><span class="line"> type,</span><br><span class="line">[props],</span><br><span class="line">[...children]</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<h3 id="组件样式"><a href="#组件样式" class="headerlink" title="组件样式"></a>组件样式</h3><ul>
<li><p>行内样式<br>想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号</span></span><br><span class="line"></span><br><span class="line">  &lt;p style=&#123;&#123;<span class="attr">color</span>:<span class="string">&#x27;red&#x27;</span>, <span class="attr">fontSize</span>:<span class="string">&#x27;14px&#x27;</span>&#125;&#125;&gt;Hello world&lt;/p&gt;</span><br></pre></td></tr></table></figure>

<p>行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如 render 函数里、组件原型上、外链js文件中</p>
</li>
<li><p>class<br>其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是， class 需要写成className （因为毕竟是在写类js代码，会收到js规则的现在，而 class 是关键字）<br><code>class ==&gt; className , for ==&gt; htmlFor(label)</code></p>
</li>
</ul>
<h3 id="事件处理"><a href="#事件处理" class="headerlink" title="事件处理"></a>事件处理</h3><p>采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写<br>onclick , React里的事件是驼峰 onClick ，React的事件并不是原生事件，而是合成事件。</p>
<ul>
<li>直接在render里写行内的箭头函数(不推荐)</li>
<li>在组件内使用箭头函数定义一个方法(推荐)</li>
<li>直接在组件内定义一个非箭头函数的方法，然后在render里直接使用 onClick={this.handleClick.bind(this)} (不推荐)</li>
<li>直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)</li>
</ul>
<p>和普通浏览器一样，事件handler会被自动传入一个  event 对象，这个对象和普通的浏览器  event 对<br>象所包含的方法和属性都基本一致。不同的是 React中的  event 对象并不是浏览器提供的，而是它自<br>己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法<code>event对象在参数最后</code></p>
<h3 id="JSX中的children"><a href="#JSX中的children" class="headerlink" title="JSX中的children"></a>JSX中的children</h3><ul>
<li><p>children中的function<br>函数返回值中自定义模板</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">  <span class="comment">//Repeat组件的定义中可以看出来，children中的方法按此定义会一直执行10次</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">ListOfTenThings</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;Repeat numTimes=&#123;<span class="number">10</span>&#125;&gt;</span><br><span class="line">      &#123;<span class="function">(<span class="params">index</span>) =&gt;</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">key</span>=<span class="string">&#123;index&#125;</span>&gt;</span>This is item &#123;index&#125; in the list<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>&#125;</span><br><span class="line">    &lt;/Repeat&gt;</span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Repeat</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> items = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; props.numTimes; i++) &#123;</span><br><span class="line">    items.push(props.children(i));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;items&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>忽略Boolean，Null以及Undefined<br>false,null,undefined以及true是不能通过render()方法，呈现在页面上的，下面的这些div块的样式 相同，都是空白块：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;div /&gt;</span><br><span class="line"></span><br><span class="line">&lt;div&gt;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;div&gt;&#123;<span class="literal">false</span>&#125;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;div&gt;&#123;<span class="literal">null</span>&#125;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;div&gt;&#123;<span class="literal">true</span>&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>如何显示Null，Undefined和Boolean ===&gt; 通过String的转化后就能在页面上显示了。</p>
</li>
</ul>
<h2 id="react-dom-diff-fiber"><a href="#react-dom-diff-fiber" class="headerlink" title="react dom diff fiber"></a>react dom diff fiber</h2><p><a href="react_diff.png">diff</a></p>
<p><a href="react_fiber.png">fiber</a></p>
<h2 id="react-资源"><a href="#react-资源" class="headerlink" title="react 资源"></a>react 资源</h2><ul>
<li><p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6950063294270930980">React全部api解读</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://github.com/carlleton/reactjs101/tree/zh-CN">react从0学习</a></p>
</li>
</ul>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/react-%E5%9F%BA%E7%A1%80/" rel="tag"># react 基础</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2020/10/21/vue%E7%AC%94%E8%AE%B0/vue-souce/" rel="prev" title="vue2代码简单解析">
                  <i class="fa fa-chevron-left"></i> vue2代码简单解析
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2020/10/22/react%E7%AC%94%E8%AE%B0/React%E8%B7%AF%E7%94%B1/" rel="next" title="react 路由的使用">
                  react 路由的使用 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">郭泽</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>

  <script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js","integrity":"sha256-tu9j5pBilBQrWSDePOOajCUdz6hWsid/lBNzK4KgEPM="},"url":"/lib/pdf/web/viewer.html"}</script>
  <script src="/js/third-party/tags/pdf.js"></script>

  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.3/mermaid.min.js","integrity":"sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>


  





</body>
</html>
